<template>
  <f7-page class="home-page" ptr @ptr:refresh="init">

    <div class="swiper-box">
      <div class="swiper-inner">
        <f7-swiper v-if="banners.length > 0" pagination :params="swiperParams">
          <f7-swiper-slide v-for="(item, index) in banners" :key="index">
            <img :src="item.pic" alt="">
          </f7-swiper-slide>
        </f7-swiper>
      </div>
    </div>

    <div class="content-padding">
      <div class="home-four-buttons">
        <f7-link href="/my-orders/">
          <i>我的<br>订单</i>
<!--          <f7-badge color="red">3</f7-badge>-->
        </f7-link>
        <f7-link href="/latest-news/">
          <i>最新<br>动态</i>
<!--          <f7-badge color="red">3</f7-badge>-->
        </f7-link>
        <f7-link href="/mutual-transfer/">
          <i>相互<br>转账</i>
<!--          <f7-badge color="red">3</f7-badge>-->
        </f7-link>
        <f7-link href="/share-center/">
          <i>分享<br>中心</i>
<!--          <f7-badge color="red">3</f7-badge>-->
        </f7-link>
      </div>

      <div class="quanqiuruchang-total">
        <div>
          <p class="main-font-color">全球预约入场总金额</p>
          <h1 class="main-font-color"><span>￥</span>{{money.sum_money || '0.00'}}</h1>
        </div>
      </div>

      <div class="zongshouyi">
        <div class="left-icon">
          <img src="../../assets/sy_007.png" alt="">
          <p>总收益</p>
        </div>
        <div class="right-data">
          <number-ele>{{money.total || '0.00'}}</number-ele>
          <p>静态收益 ￥{{money.static || '0.00'}}</p>
          <p>动态收益 ￥{{money.namtic || '0.00'}}</p>
        </div>
      </div>

      <div class="flex-2-item">
        <div>
          <div>
            <p>可出单</p>
            <number-ele :font-size="20">{{money.shouyi}}</number-ele>
          </div>
        </div>
        <div>
          <div>
            <p>今日收益</p>
            <number-ele :font-size="20">{{money.today_shouyi || '0.00'}}</number-ele>
          </div>
        </div>
      </div>

      <div class="reservation-btn-box">
        <f7-button fill round large @click="reservationPopup = true">立即预约</f7-button>
      </div>
    </div>

    <!--立即预约弹窗-->
    <!--<van-popup v-model="reservationPopup" slot="fixed">
      <div class="reservation-container">
        <h2>预约排单</h2>
        <p>额度</p>
        <f7-link class="select-edu" popover-open=".reservation-popover">
          <span>请选择额度</span>
          <i class="iconfont icon-plus-arrow-down"></i>
        </f7-link>
        <p>建设金月:1294.57</p>

        <div class="select-edu justify-content-center">
          1%
        </div>

        <f7-button fill>确定</f7-button>
      </div>
    </van-popup>-->
    <custom-modal v-model="reservationPopup">
      <div class="reservation-container">
        <h2>预约排单</h2>
        <p>额度</p>
        <f7-link class="select-edu" popover-open=".reservation-popover">
          <span>{{selectEdu || '请选择额度'}}</span>
          <i class="iconfont icon-plus-arrow-down"></i>
        </f7-link>
        <p>建设金余额:{{$store.getters.userInfo.money.paidan_f}}</p>

        <div class="select-edu justify-content-center">
          1%
        </div>

        <f7-button fill @click="handleOrderBuy">确定</f7-button>
      </div>
    </custom-modal>

    <f7-popover class="popover-menu reservation-popover" ref="def">
      <f7-list>
        <f7-list-item class="no-icon-radio" radio :title="`￥${item.jine}`" name="demo-radio"
                      :value="item.id"
                      @click="toggleType(item.id, item.jine)"
                      v-for="(item, index) in staticList"
                      :key="index"
                      :disabled="item.id > staticLevel"
        >
          <span slot="after" class="font-color">{{staticLevel >= item.id?'已解锁':'未解锁'}}</span>
        </f7-list-item>
        <!--<f7-list-item class="no-icon-radio" radio title="￥7000.00" name="demo-radio"
                      value="2"
                      @change="toggleType($event.target.value)"
        >
          <span slot="after" class="font-color">未解锁</span>
        </f7-list-item>
        <f7-list-item class="no-icon-radio" radio title="￥15000.00" name="demo-radio"
                      value="3"
                      @change="toggleType($event.target.value)"
        >
          <span slot="after" class="font-color">未解锁</span>
        </f7-list-item>-->
      </f7-list>
    </f7-popover>

    <!--公告弹窗-->
    <custom-modal v-model="showGongGao">
      <div class="gonggao-container">
        <h3>{{gongGao.title}}</h3>
        <div v-html="gongGao.content">

        </div>
      </div>
    </custom-modal>
  </f7-page>
</template>

<script>
  import {getBannerList, staticList, ordersBuy, getGongGao} from "../../api/home";
  import {getToken} from "../../utils/auth";

  export default {
    name: "home",
    data() {
      return {
        swiperParams: {
          observer: true,
          observeParents: true,
          autoplay: {
            delay: 3000
          },
          loop: true
        },
        reservationPopup: false,
        banners: [],
        money: {},
        staticList: [],
        selectEdu: '',
        gongGao: {},
        showGongGao: false
      }
    },
    computed: {
      staticLevel() {
        return this.$store.getters.userInfo.user.static_level;
      }
    },
    watch: {
      '$store.getters.token'(value) {
        if(value) {
          this.init();
          this.initStaticList();
        } else {
          this.banners = []
        }
      }
    },
    mounted() {
      if (getToken()) {
        this.init();
        this.initStaticList();
        this.initGongGao();
      }
    },
    methods: {
      initStaticList() {
        staticList().then(res => {
          this.staticList = res.data;
        })
      },
      init(done) {
        getBannerList().then(res => {
          this.banners = res.data;
          this.money = res.money;
          done && done();
          setTimeout(() => {
            this.init();
          }, 1000 * 10)
        })
      },
      initGongGao() {
        getGongGao().then(res => {
          if (res.data.length > 0) {
            this.gongGao = res.data[0];
            this.showGongGao = true;
          }
        })
      },
      toggleType(id, jine) {
        if (id > this.staticLevel) return;
        console.log(jine);
        this.selectEdu = jine;
        this.$refs.def.close();
      },
      handleOrderBuy() {
        ordersBuy({coin: parseInt(this.selectEdu)}).then(res => {
          this.$refs.def.close();
          this.reservationPopup =false;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .home-page /deep/ .page-content {
    background: url("../../assets/home-bg.png") no-repeat center top;
    background-size: 100% 100%;
  }

  .home-four-buttons {
    display: flex;
    .link {
      margin: 0 5px;
      display: block;
      flex: 1;
      text-align: center;
      position: relative;
      padding-top: 30px;
      box-sizing: border-box;
      height: 150px;
      background: url("../../assets/sy_004.png") no-repeat center center;
      background-size: cover;
      i {
        font-weight: bold;
        display: inline-block;
        font-size:24px;
        font-family:HYQiHei,serif;
        color:rgba(34,34,34,1);
        background:linear-gradient(0deg,rgba(25,154,182,1) 0%, rgba(101,228,255,1) 50%, rgba(25,154,182,1) 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
      }
      .badge {
        position: absolute;
        top: 20px;
      }
    }
  }
  .quanqiuruchang-total {
    height: 300px;
    text-align: center;
    /*color: #fff;*/
    background: url("../../assets/sy_005.png") no-repeat center top;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      font-size:30px;
      font-family:'HYQiHei';
      font-weight: bold;
    }
    h1 {
      span {
        font-size: 40px;
        font-family: "Microsoft YaHei UI";
        font-weight: bold;
      }
      color:rgba(23,29,53,1);
      background:linear-gradient(57deg,rgba(34,163,191,1) 0%, rgba(101,228,255,1) 36.328125%, rgba(101,228,255,1) 65.478515625%, rgba(28,166,195,1) 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-weight: 500;
      font-size: 60px;
      font-family: AvantGardeITCbyBT;
    }
  }
  .zongshouyi {
    height: 260px;
    background: url("../../assets/sy_006.png") no-repeat center top;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .left-icon {
      width: 40%;
      text-align: center;
      position: relative;
      &:after {
        display: block;
        content: '';
        width:1px;
        height:127px;
        background:linear-gradient(0deg,rgba(25,154,182,1),rgba(101,228,255,1));
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-45%);
      }
      p {
        font-size: 24px;
        color:rgba(34,34,34,1);
        background:linear-gradient(57deg,rgba(72,166,199,1) 0%, rgba(87,225,255,1) 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
      }
      img {
        width: 85px;
      }
    }
    .right-data {
      flex: 1;
      p {
        color: $fontColor;
        background:linear-gradient(57deg,rgba(72,166,199,1) 0%, rgba(87,225,255,1) 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
      }
    }
  }
  .flex-2-item {
    display: flex;
    text-align: center;
    > div {
      flex: 1;
      height: 190px;
      background: url("../../assets/sy_009.png") no-repeat center top;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    p {
      @extend .main-font-color;
      font-size: 25px;
      padding-bottom: 10px;
    }
  }
  .reservation-btn-box {
    display: flex;
    align-items: center;
    padding: 20px 55px;
    box-sizing: border-box;
    height: 190px;
    background: url("../../assets/sy_010.png") no-repeat center top;
    background-size: 100% 100%;
    .button {
      flex: 1;
    }
  }
  .reservation-container {

    h2 {
      text-align: center;
      font-size: 26px;
      padding-bottom: 10px;
    }
    p {
      padding: 10px 0;
      font-size: 26px;
    }
    .select-edu {
      height: 85px;
      background:linear-gradient(57deg,rgba(72,166,199,1),rgba(87,225,255,1));
      border-radius:20px;
      color: $fontColor;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 $padding;
      font-size: 24px;
      margin-bottom: 20px;
      .iconfont {
        font-size: 30px;
      }
    }
    .button {
      margin-top: 30px;
      background:linear-gradient(57deg,rgba(72,166,199,1),rgba(87,225,255,1));
    }
  }
  .gonggao-container {

    h3 {
      text-align: center;
      padding-bottom: $padding;
    }
    > div {
      font-size: 22px;
    }
  }
</style>